<template>
    <view class="sort">
        <view class="flex plr-6 font-size-12 flex-center font-color-666 sortItemCon" @click="targetShow">
            {{ currentName }}
            <u-icon :class="{ up: show }" class="ml-8" name="arrow-down" size="12" color="#666"></u-icon>
        </view>
        <!-- <view class="sort-item bg-color-theme ml-4 mt-10" v-show="show">
            <view class="pb-16 plr-16">
                <view
                    class="font-size-14 pt-16 flex flex-ai-center"
                    @click="changeSort(item)"
                    :class="item.name == currentName ? 'font-color-textPrimary' : 'font-color-666'"
                    v-for="item in sortType"
                    :key="item.key + item.value"
                >
                    {{ item.name && handleLang(item.name) }}
                    <w-icon v-if="item.name == currentName" name="checked1" class="ml-4" size="20"></w-icon>
                </view>
            </view>
        </view> -->
        <w-popup-bottom v-model="show" title="排序方式">
            <view class="sort-con">
                <view v-for="item in sortType" :key="item.key + item.value" @click="changeSort(item)">
                    <text>{{ item.name }}</text>
                    <w-icon :name="`nw/${item.name == currentName ? 'check' : 'uncheck'}`" size="16"></w-icon>
                </view>
            </view>
        </w-popup-bottom>
    </view>
</template>

<script>
export default {
    props: {
        where: {
            type: Object,
            default() {
                return {
                    price: null,
                    new: 1,
                    series_id: 0,
                };
            },
        },
    },
    data() {
        return {
            show: false,
            left: 0,
            currentType: "time",
            height: "100%",
            sortType: [
                {
                    name: "最新上架",
                    key: "new",
                    value: 1,
                },
                {
                    name: "价格升序",
                    key: "price",
                    value: 2,
                },
                {
                    name: "价格降序",
                    key: "price",
                    value: 1,
                },
            ],
        };
    },
    computed: {
        currentName() {
            if (this.where.new) {
                return this.sortType.find((v) => v.key == "new" && v.value == this.where.new).name;
            }
            if (this.where.price) {
                return this.sortType.find((v) => v.key == "price" && v.value == this.where.price).name;
            }
        },
    },

    mounted() {},
    methods: {
        targetShow() {
            this.show = !this.show;
            this.$emit("show", this.show);
        },
        changeSort(item) {
            if (item.key == "new") {
                this.where.price = null;
            }
            if (item.key == "price") {
                this.where.new = null;
            }
            this.where[item.key] = item.value;
            this.show = false;
            // this.$set(this.where,item.key,item.value)
            this.$emit("change", item);
        },
        getX() {
            let _this = this;
            uni.createSelectorQuery()
                .in(this)
                .select(".sort")
                .boundingClientRect(({ left }) => {
                    _this.left = -left;
                })
                .exec();
        },
    },
};
</script>

<style lang="scss">
.sort {
    height: 74rpx;
    padding-left: 32rpx;
    .sortItemCon {
        width: fit-content;
        height: 50rpx;
        border: 1px solid #eeeeee;
    }
}

.up {
    transform: rotate(180deg);
}

.sort-con {
    width: 100%;
    padding-top: 16rpx;
    border-top: 2rpx solid #eee;
    margin-top: 32rpx;
    > view {
        width: 100%;
        height: 70rpx;
        display: flex;
        align-items: center;
        justify-content: space-between;
        font-size: 26rpx;
        font-weight: 500;
    }
}
</style>
